<template>
  <div class="chart-full" style="display: flex; overflow-y: hidden">
    <!-- <menu-panel :menuList="menuList" v-on:choose-menu="chooseMenu"></menu-panel> -->
    <div style="height: 100%; width: 200px; padding: 8px; border-right: 1px solid #d7dde4">
      <!-- :render="renderContent"  -->
      <div>{{ 'DB:' + dbinfo.host + ':' + dbinfo.port + ':' + dbinfo.database }}</div>
      <Tree :data="menuList" :render="renderContent" @on-select-change="chooseMenu" ref="tableTree"></Tree>
    </div>
    <div style="position: relative; height: 100%; width: calc(100% - 200px)">
      <Tabs class="tabs-large" :value="curTab" @on-click="changeTab">
        <Tab-pane label="表结构" name="tab_desc"></Tab-pane>
        <Tab-pane label="表数据" name="tab_data"></Tab-pane>
      </Tabs>
      <div v-show="curTab === 'tab_desc'" class="the-bar">tab_desc</div>
      <div v-show="curTab === 'tab_data'" class="the-bar">
        <div class="the-bar-item">
          <div>表名：</div>
          <div style="width: 160px">{{ curMenu }}</div>
        </div>
        <div class="the-bar-item">
          <div>总数：</div>
          <div style="width: 40px">{{ curTotal }}</div>
        </div>
        <select-search
          ref="selectSearch"
          :selectId="'idcLocationSearch'"
          :keyList="dataColumn"
          :loading="dataLoading"
          :invisibleKey="invisibleKey"
          @on-change="searchFilter"
          style="width: 600px"
        >
        </select-search>
        <div style="flex-grow: 1"></div>
        <Button @click="exportData">exportData</Button>
        <Button @click="refresh">refresh</Button>
      </div>
      <div style="height: calc(100% - 100px); padding: 0 16px; overflow-y: auto">
        <Table v-show="curTab === 'tab_desc'" :data="curDesc" :columns="descColumn" :loading="descLoading"></Table>
        <Table
          v-show="curTab === 'tab_data'"
          :data="curData"
          :columns="dataColumn"
          :loading="dataLoading"
          ref="dataTableRef"
        >
          <!-- 循环所有文本框的column -->
          <template v-for="columnObj in dataColumnTextarea" slot-scope="{ row }" :slot="columnObj.slot">
            <Input v-model="row.content" type="textarea" :rows="2" style="width: 100%" :key="columnObj.key" />
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
import SysInfoConst from './SysInfoConst';
import SelectSearch from '../components/select-search.vue';

export default {
  name: 'SysInfo',
  components: {
    SelectSearch,
  },
  data() {
    return {
      dbinfo: {
        host: '-',
        port: '-',
        database: '-',
      },

      menuList: [
        {
          title: 'Table',
          expand: true,
          nodeIcon: 'md-list',
          children: [],
        },
      ],

      invisibleKey: ['createTime', 'updateTime'],

      descColumn: SysInfoConst.descColumn,
      descLoading: false,
      dataLoading: false,

      curTab: 'tab_desc',
      curMenu: null,
      curDesc: [],
      dataColumn: [],
      curData: [],
      curTotal: 0,
      curFilter: [],

      searchList: [],
    };
  },
  computed: {
    dataColumnTextarea: function () {
      return this.dataColumn.filter(item => {
        return item.showType === 'textarea';
      });
    },
  },
  methods: {
    exportData() {
      const filename = 'aaa';
      this.$refs.dataTableRef.exportCsv({
        filename,
        columns: this.dataColumn.filter(item => {
          return item.key !== 'content';
        }),
        data: this.curData,
      });
    },
    refresh() {
      this.queryData(this.curMenu);
      this.queryTotal(this.curMenu);
    },
    chooseMenu(paramObj) {
      if (paramObj.length === 0) {
        return;
      }
      this.curMenu = paramObj[0].id;
      this.curTotal = null;
      this.curFilter = [];
      this.$refs.selectSearch.removeAll();
      this.queryDesc(this.curMenu).then(() => {
        if (this.curTab === 'tab_data') {
          this.queryData(this.curMenu);
          this.queryTotal(this.curMenu);
        }
      });
    },
    changeTab(paramObj) {
      this.curTab = paramObj;
      if (this.curMenu) {
        this.execTab();
      }
    },
    execTab() {
      if (this.curTab === 'tab_data') {
        this.queryData(this.curMenu);
        this.queryTotal(this.curMenu);
      } else if (this.curTab === 'tab_desc') {
        this.queryDesc(this.curMenu);
      }
    },
    // webhome_0.1
    fitExt(srcObj, keyArray) {
      const cfgMap = {
        'tenddata.user_account_content.content': {
          showType: 'textarea',
        },
        'tenddata.user_dashboard.content': {
          showType: 'textarea',
        },
      };
      const keyStr = keyArray.join('.');
      if (cfgMap[keyStr]) {
        const tmpCfg = cfgMap[keyStr];
        srcObj['slot'] = keyArray[2];
        srcObj['showType'] = tmpCfg.showType;
        srcObj['width'] = 160;
      }
    },
    queryDesc(paramObj) {
      this.descLoading = true;
      return Axios.get('/appuser/sysinfo/desc/' + paramObj).then(retObj => {
        this.descLoading = false;
        this.curDesc = retObj.data;
        this.curData = [];
        this.dataColumn = retObj.data.map(item => {
          const retObj = {
            key: item.COLUMN_NAME,
            title: item.COLUMN_NAME,
          };
          this.fitExt(retObj, ['tenddata', item.TABLE_NAME, item.COLUMN_NAME]);
          return retObj;
        });
      });
    },
    queryData(paramObj) {
      this.dataLoading = true;
      Axios.get('/appuser/sysinfo/query/' + paramObj, { params: this.curFilter }).then(retObj => {
        this.dataLoading = false;
        this.curData = retObj.data;
      });
    },
    queryTotal(paramObj) {
      Axios.get('/appuser/sysinfo/total/' + paramObj, { params: this.curFilter }).then(retObj => {
        this.curTotal = retObj.data[0].total;
      });
    },
    searchFilter(paramObj) {
      this.curFilter = {};
      paramObj.forEach(item => {
        this.curFilter[item.key] = item.value;
      });

      this.queryData(this.curMenu);
      this.queryTotal(this.curMenu);
    },
    renderContent(h, { data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%',
          },
        },
        [
          h(
            'span',
            {
              attrs: {
                title: data.title,
              },
              class: ['ivu-tree-title', data.selected ? 'ivu-tree-title-selected' : ''],
              on: {
                click: () => {
                  this.$refs.tableTree.handleSelect(data.nodeKey);
                },
              },
            },
            [
              h('Icon', {
                props: {
                  type: data.nodeIcon,
                },
                style: {
                  marginRight: '8px',
                },
              }),
              h('span', data.title),
            ]
          ),
        ]
      );
    },
    getTables() {
      Axios.get('/appuser/sysinfo/tables').then(retObj => {
        this.menuList[0].children = retObj.data.map(item => {
          return {
            id: item,
            name: item,
            title: item,
            nodeIcon: 'md-cube',
          };
        });
      });
    },
    getDbInfo() {
      Axios.get('/appuser/sysinfo/dbinfo').then(retObj => {
        this.dbinfo = retObj.data;
      });
    },
  },

  mounted() {
    this.getDbInfo();
    this.getTables();
  },
};
</script>

<style scoped>
.the-bar {
  display: flex;
  height: 32px;
  line-height: 24px;
  padding: 0 16px;
  margin-bottom: 16px;
}

.the-bar-item {
  display: flex;
  line-height: 32px;
  margin-right: 8px;
}

/* .search-area {
  vertical-align: top;
  width: 100%;
  min-height: 34px;
} */
</style>
